<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel='stylesheet' th:href='@{css/login.css}'/>
</head>
<body>
<form class="login" th:action="${LOGIN}" method="post" style="text-align:center;">
    <h1>Login</h1>
    <div class="iconfont icon-yonghu-copy">
        <input name="username" type="text" placeholder="用户名">
    </div>
    <div class="iconfont icon-mima">
        <input name="password" type="password">
    </div>
    <button type="submit">登录</button>
    <a onclick="qr_login()">扫码登录</a><br>
    <a th:href="@{|${REGISTER}${HTML_SUFFIX}|}">注册</a>
</form>

<script th:replace="clip/script::common"></script>
<script th:replace="clip/script::layer"></script>
<script>
    // 向后端发送一个websocket连接请求
    let ws = new WebSocket('ws://' + root_path + '[[${QR_SOCKET}]]');
    ws.onmessage = function (event) {
        let data = JSON.parse(event.data);
        console.dir(data)
        if (data.id != -1) {
            chain({
                url: '[[${LOGIN}]]',
                method: 'post',
                data: json2form(data)
            }).then(
                () => window.location.href = "[[${USER_INDEX}]]"
            );
        } else {
            alert('扫码失败');
        }
    }

    function connect() {
        ws.send('[[${uuid}]]');
    }

    function qr_login() {
        layer.open({
            type: 1
            , area: ['300px', '300px']
            , title: '扫码登录'
            , anim: 1
            , content: '<center><img style="width: 100%" src="//api.pwmqr.com/qrcode/create/?url=http://' + root_path +
                '[[@{|${QR_LOGIN}/${uuid}|}]]"></center>'
        });
        connect();
    }
</script>

</body>
</html>